<template>
	<view class="home-page">
		<!-- 顶部搜索栏 -->
		<view class="top-search">
			<view class="search-wrapper">
				<u-search 
					placeholder="搜索设备"
					:show-action="false"
					shape="round"
					:bg-color="'#f8f9fa'"
					@search="handleSearch"
				></u-search>
			</view>
		</view>

		<scroll-view scroll-y class="scroll-content">
			<!-- Banner轮播 -->
			<view class="banner-section">
				<swiper 
					class="banner-swiper" 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000"
					:duration="500"
					circular
				>
					<swiper-item v-for="(banner, index) in bannerList" :key="index" class="banner-item">
						<view class="banner-content" @click="handleBannerClick(banner)">
							<image :src="banner.imageUrl" class="banner-image" mode="aspectFill"></image>
							<view class="banner-overlay">
								<text class="banner-title">{{ banner.title }}</text>
								<text class="banner-desc">{{ banner.description }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 功能快捷入口 -->
			<view class="quick-nav content-card">
				<text class="section-title">快捷服务</text>
				<view class="nav-grid">
					<view class="nav-item" @click="goToDeviceList">
						<view class="nav-icon">
							<u-icon name="list" size="24" color="#4A90E2"></u-icon>
						</view>
						<text class="nav-text">设备列表</text>
					</view>
					<view class="nav-item" @click="goToFavorites">
						<view class="nav-icon">
							<u-icon name="heart" size="24" color="#E91E63"></u-icon>
						</view>
						<text class="nav-text">我的收藏</text>
					</view>
					<view class="nav-item" @click="goToOrders">
						<view class="nav-icon">
							<u-icon name="file-text" size="24" color="#F0AD4E"></u-icon>
						</view>
						<text class="nav-text">我的订单</text>
					</view>
					<view class="nav-item" @click="showUploadDevice">
						<view class="nav-icon">
							<u-icon name="plus-circle" size="24" color="#D9534F"></u-icon>
						</view>
						<text class="nav-text">上传设备</text>
					</view>
				</view>
			</view>

			<!-- 推荐设备 -->
			<view class="recommend-section content-card">
				<view class="section-header">
					<text class="section-title">推荐设备</text>
					<text class="more-btn" @click="navigateTo('/pages/devices/list')">
						更多 <u-icon name="arrow-right" size="12"></u-icon>
					</text>
				</view>
				
				<view class="device-grid" v-if="recommendDevices.length > 0">
					<view 
						class="device-item" 
						v-for="device in recommendDevices" 
						:key="device.id"
						@click="navigateTo(`/pages/devices/detail?id=${device.id}`)"
					>
						<image :src="device.images[0] || '/static/placeholder-device.png'" class="device-image" mode="aspectFill"></image>
						<view class="device-info">
							<text class="device-title">{{ device.title }}</text>
							<text class="device-price">￥{{ device.dailyRent }}/天</text>
							<view class="device-meta">
								<text class="device-location">{{ device.location.city }}</text>
								<text class="device-status" :class="getStatusClass(device.status)">{{ getStatusText(device.status) }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view v-else-if="loading.devices" class="loading-placeholder">
					<u-loading-icon mode="spinner"></u-loading-icon>
					<text class="loading-text">加载推荐设备中...</text>
				</view>
				
				<view v-else class="empty-placeholder">
					<u-icon name="empty-data" size="48" color="#ccc"></u-icon>
					<text class="empty-text">暂无推荐设备</text>
					<u-button type="primary" size="mini" @click="reloadRecommendDevices">重新加载</u-button>
				</view>
			</view>

			<!-- 客户案例 -->
			<view class="cases-section content-card">
				<text class="section-title">客户案例</text>
				<scroll-view scroll-x class="cases-scroll">
					<view class="cases-list">
						<view 
							class="case-item" 
							v-for="(caseItem, index) in customerCases" 
							:key="index"
							@click="viewCaseDetail(caseItem)"
						>
							<image :src="caseItem.image" class="case-image" mode="aspectFill"></image>
							<view class="case-content">
								<text class="case-title">{{ caseItem.title }}</text>
								<text class="case-company">{{ caseItem.company }}</text>
								<text class="case-desc">{{ caseItem.description }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 公司介绍 -->
			<view class="company-intro content-card">
				<text class="section-title">关于鼎昌环保</text>
				<view class="intro-content">
					<view class="company-header">
						<text class="company-name">苏州鼎昌节能环保科技有限公司</text>
						<text class="company-subtitle">专业工业废水处理与资源化利用</text>
					</view>
					
					<text class="intro-description">
						成立于2017年，是一家专注于工业废水处理与资源化利用的高新技术企业。以MVR（机械蒸汽再压缩）系统为核心技术，为工业三废综合治理提供高效、专业的解决方案。
					</text>
					
					<view class="core-advantages">
						<view class="advantage-item">
							<view class="advantage-icon">
								<u-icon name="star" size="20" color="#FF6B35"></u-icon>
							</view>
							<view class="advantage-content">
								<text class="advantage-title">节能75%+</text>
								<text class="advantage-desc">蒸汽热焓循环技术</text>
							</view>
						</view>
						<view class="advantage-item">
							<view class="advantage-icon">
								<u-icon name="reload" size="20" color="#4A90E2"></u-icon>
							</view>
							<view class="advantage-content">
								<text class="advantage-title">回收率95%+</text>
								<text class="advantage-desc">冷凝水高效回收</text>
							</view>
						</view>
						<view class="advantage-item">
							<view class="advantage-icon">
								<u-icon name="arrow-up" size="20" color="#5CB85C"></u-icon>
							</view>
							<view class="advantage-content">
								<text class="advantage-title">成本降低80%</text>
								<text class="advantage-desc">系统运行经济性</text>
							</view>
						</view>
					</view>
					
					<view class="intro-features">
						<view class="feature-item">
							<view class="feature-icon">
								<u-icon name="setting" size="24" color="#2979FF"></u-icon>
							</view>
							<text class="feature-text">智能制造</text>
						</view>
						<view class="feature-item">
							<view class="feature-icon">
								<u-icon name="checkmark-circle" size="24" color="#2979FF"></u-icon>
							</view>
							<text class="feature-text">品质认证</text>
						</view>
						<view class="feature-item">
							<view class="feature-icon">
								<u-icon name="account" size="24" color="#2979FF"></u-icon>
							</view>
							<text class="feature-text">专业服务</text>
						</view>
						<view class="feature-item">
							<view class="feature-icon">
								<u-icon name="star" size="24" color="#2979FF"></u-icon>
							</view>
							<text class="feature-text">技术创新</text>
						</view>
					</view>
					
					<view class="company-stats">
						<view class="stat-item">
							<text class="stat-number">2亿+</text>
							<text class="stat-label">累计合同额</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">7年</text>
							<text class="stat-label">最长稳定运行</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">100%</text>
							<text class="stat-label">综合达标率</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">91.3%</text>
							<text class="stat-label">客户续约率</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部间距 -->
			<view class="bottom-spacing"></view>
		</scroll-view>

		<!-- 上传设备弹窗 -->
		<u-popup :show="showUploadModal" @close="showUploadModal = false" mode="center" border-radius="20" :safe-area-inset-bottom="true">
			<view class="upload-modal">
				<view class="modal-header">
					<text class="modal-title">权限提示</text>
					<u-icon name="close" @click="showUploadModal = false" size="20"></u-icon>
				</view>
				<view class="modal-content">
					<text class="modal-desc">上传设备需要出租方身份且完成实名认证</text>
					<view class="permission-tips">
						<view class="tip-item">
							<u-icon name="checkmark-circle" size="16" color="#52c41a"></u-icon>
							<text>成为出租方</text>
						</view>
						<view class="tip-item">
							<u-icon name="checkmark-circle" size="16" color="#52c41a"></u-icon>
							<text>完成实名认证</text>
						</view>
					</view>
					<view class="upload-actions">
						<u-button type="primary" @click="goToProfile">前往个人中心</u-button>
						<u-button plain @click="showUploadModal = false">稍后再说</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import apiService from '@/api/index.js'
	
	export default {
		data() {
			return {
				showUploadModal: false,
				bannerList: [],
				// Mock数据作为降级方案
				mockBannerList: [
					{
						id: 1,
						title: 'MVR蒸发器租赁服务',
						description: '专业工业设备，按需租赁',
						imageUrl: '/static/banners/banner1.png',
						linkUrl: '/pages/devices/list'
					},
					{
						id: 2,
						title: '全国设备配送',
						description: '覆盖全国主要城市',
						imageUrl: '/static/banners/banner2.png',
						linkUrl: '/pages/about'
					},
					{
						id: 3,
						title: '专业技术支持',
						description: '7×24小时技术服务',
						imageUrl: '/static/banners/banner3.png',
						linkUrl: '/pages/service'
					}
				],
				recommendDevices: [],
				customerCases: [],
				// Mock数据作为降级方案
				mockCustomerCases: [
					{
						id: 1,
						title: '光大绿色环保固废处置  600T/D双效',
						company: '黄石光大',
						description: '通过租赁MVR设备，年节约成本数十万元',
						image: 'https://img.ezubei.cn/example1.png'
					},
					{
						id: 2,
						title: '光大绿色环保固废处置 150T/D双效',
						company: '光大海门',
						description: 'MVR设备助力环保达标，提升企业形象',
						image: 'https://img.ezubei.cn/example2.png'
					},
					{
						id: 3,
						title: '450T/D MVR',
						company: '安徽华威铜箔科技有限公司',
						description: '高效浓缩，保障产品品质',
						image: 'https://img.ezubei.cn/example3.png'
					},
					{
						id: 4,
						title: '120T/D MVR',
						company: '山东蓝帆新材料有限公司',
						description: '助力材料处理',
						image: 'https://img.ezubei.cn/example4.png'
					}
				],
				loading: {
					devices: false
				}
			}
		},
		
		onLoad() {
			this.initPage()
		},
		
		onShow() {
			// 检查是否刚刚登录成功，如果是则延迟加载避免立即触发token检查
			const justLoggedIn = uni.getStorageSync('just_logged_in')
			if (justLoggedIn) {
				uni.removeStorageSync('just_logged_in')
				// 延迟2秒加载，让token稳定
				setTimeout(() => {
					this.loadRecommendDevices()
				}, 2000)
			} else {
				// 每次显示页面时静默刷新数据，不显示loading
				this.loadRecommendDevices()
			}
		},
		
		onPullDownRefresh() {
			this.refreshData()
		},
		
		methods: {
			async initPage() {
				// 初始化页面数据
				await Promise.all([
					this.loadBannerList(),
					this.loadRecommendDevices(),
					this.loadCustomerCases()
				])
				
				console.log('首页初始化完成')
			},
			
			async loadBannerList() {
				try {
					// 检查缓存
					const cacheKey = 'banner_list_cache'
					const cacheTime = 5 * 60 * 1000 // 5分钟缓存
					const cachedData = this.getCachedData(cacheKey, cacheTime)
					
					if (cachedData && cachedData.length > 0) {
						this.bannerList = cachedData
						console.log('使用缓存的轮播图数据:', cachedData.length + '个')
						return
					}
					
					// 从API获取轮播图数据
					const banners = await apiService.banner.getActiveBanners()
					
					if (banners && banners.length > 0) {
						const arr = banners.map(item=>{
							if(item.imageUrl.indexOf('img.ezubei.cn')==-1){
								item.imageUrl = item.imageUrl.replace('https://ezubei.cn',"https://img.ezubei.cn")
							}
							return item
						})
						this.bannerList = banners
						// 缓存数据
						this.setCachedData(cacheKey, banners)
						console.log('从API加载轮播图成功:', banners.length + '个')
					} else {
						// 使用Mock数据作为降级方案
						this.bannerList = this.mockBannerList
						console.log('使用Mock轮播图数据作为降级方案')
					}
				} catch (error) {
					console.error('加载轮播图失败:', error)
					// 使用Mock数据作为降级方案
					this.bannerList = this.mockBannerList
					console.log('加载失败，使用Mock轮播图数据')
				}
			},
			

			
			async loadRecommendDevices() {
				if (this.loading.devices) return
				
				try {
					// 检查缓存
					const cacheKey = 'recommend_devices_cache'
					const cacheTime = 5 * 60 * 1000 // 5分钟缓存
					const cachedData = this.getCachedData(cacheKey, cacheTime)
					
					if (cachedData) {
						this.recommendDevices = cachedData
						return
					}
					
					// 先显示Mock数据，避免空白页面
					this.recommendDevices = this.getMockDevices()
					
					// 只有在用户主动刷新或重新加载时才显示loading
					this.loading.devices = true
					
					// 使用设备列表API获取推荐设备
					const response = await apiService.device.getDeviceList({
						page: 1,
						limit: 4,
						sortBy: 'createdAt',
						sortOrder: 'desc'
					})
					
					// 检查响应格式
					if (response && response.code === 200 && response.data && response.data.items) {
						const devices = response.data.items
						if (devices.length > 0) {
							this.recommendDevices = devices
							// 缓存数据
							this.setCachedData(cacheKey, devices)
							console.log('推荐设备加载成功:', devices.length + '个设备')
						}
					} else {
						console.log('API响应格式不正确，继续使用Mock数据')
					}
				} catch (error) {
					console.error('加载推荐设备失败:', error)
					
					// 静默失败，不显示错误提示，继续使用Mock数据
					console.log('网络请求失败，使用Mock数据')
				} finally {
					this.loading.devices = false
				}
			},
			
			async reloadRecommendDevices() {
				// 用户主动重新加载时显示loading状态
				this.loading.devices = true
				this.recommendDevices = []
				
				try {
					// 清除缓存，强制重新获取数据
					uni.removeStorageSync('recommend_devices_cache')
					await this.loadRecommendDevices()
				} catch (error) {
					console.error('重新加载推荐设备失败:', error)
					// 如果失败，显示mock数据
					this.recommendDevices = this.getMockDevices()
				} finally {
					this.loading.devices = false
				}
			},
			
			async loadCustomerCases() {
				try {
					// 检查缓存
					const cacheKey = 'customer_cases_cache'
					const cacheTime = 10 * 60 * 1000 // 10分钟缓存
					const cachedData = this.getCachedData(cacheKey, cacheTime)
					
					if (cachedData && cachedData.length > 0) {
						this.customerCases = cachedData
						console.log('使用缓存的客户案例数据:', cachedData.length + '个')
						return
					}
					
					// 从API获取客户案例数据
					const response = await uni.request({
						url: 'https://api.ezubei.cn/customer-cases',
						method: 'GET'
					})
					
					if (response.statusCode === 200 && response.data.code === 200) {
						const cases = response.data.data
						if (cases && cases.length > 0) {
							this.customerCases = cases
							// 缓存数据
							this.setCachedData(cacheKey, cases)
							console.log('从API加载客户案例成功:', cases.length + '个')
						} else {
							// 使用Mock数据作为降级方案
							this.customerCases = this.mockCustomerCases
							console.log('API返回空数据，使用Mock客户案例数据')
						}
					} else {
						throw new Error('API响应异常')
					}
				} catch (error) {
					console.error('加载客户案例失败:', error)
					// 使用Mock数据作为降级方案
					this.customerCases = this.mockCustomerCases
					console.log('加载失败，使用Mock客户案例数据')
				}
			},
			
			async refreshData() {
				try {
					await Promise.all([
						this.loadBannerList(),
						this.loadRecommendDevices(),
						this.loadCustomerCases()
					])
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					})
				} catch (error) {
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					})
				} finally {
					uni.stopPullDownRefresh()
				}
			},
			
			getMockDevices() {
				return [
					{
						id: '1',
						title: 'MVR-2000型蒸发器',
						dailyRent: '1200',
						images: ['/static/devices/device1.jpg'],
						status: 'AVAILABLE',
						location: { city: '上海' }
					},
					{
						id: '2',
						title: 'MVR-3000型浓缩器',
						dailyRent: '1800',
						images: ['/static/devices/device2.jpg'],
						status: 'AVAILABLE',
						location: { city: '广州' }
					},
					{
						id: '3',
						title: 'MVR-1500型设备',
						dailyRent: '900',
						images: ['/static/devices/device3.jpg'],
						status: 'RENTED',
						location: { city: '深圳' }
					},
					{
						id: '4',
						title: 'MVR-2500型系统',
						dailyRent: '1500',
						images: ['/static/devices/device4.jpg'],
						status: 'AVAILABLE',
						location: { city: '北京' }
					}
				]
			},
			
			getStatusClass(status) {
				const statusMap = {
					'AVAILABLE': 'status-available',
					'RENTED': 'status-rented',
					'MAINTENANCE': 'status-maintenance',
					'OFFLINE': 'status-offline'
				}
				return statusMap[status] || ''
			},
			
			getStatusText(status) {
				const statusMap = {
					'AVAILABLE': '可租赁',
					'RENTED': '已租出',
					'MAINTENANCE': '维护中',
					'OFFLINE': '下线'
				}
				return statusMap[status] || '未知'
			},
			
			handleSearch(keyword) {
				if (keyword.trim()) {
					// 使用switchTab跳转到设备tab，并传递搜索关键词
					uni.switchTab({
						url: '/pages/devices/list',
						success: () => {
							// 通过事件通信传递搜索关键词
							uni.$emit('searchFromHome', keyword.trim())
						}
					})
				}
			},
			
			handleBannerClick(banner) {
				if (banner.linkUrl) {
					uni.navigateTo({
						url: banner.linkUrl
					})
				}
			},
			
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			
			chooseLocation() {
				// 实现位置选择功能
				uni.chooseLocation({
					success: (res) => {
						this.currentLocation = res.name || res.address || '已选择位置'
						// 可以保存选择的位置坐标，用于推荐附近设备
						console.log('选择位置:', res)
					},
					fail: (error) => {
						console.error('选择位置失败:', error)
						uni.showToast({
							title: '选择位置失败',
							icon: 'none'
						})
					}
				})
			},
			
			showUploadDevice() {
				console.log('🔵 点击上传设备按钮')
				
				// 检查用户登录状态
				const token = uni.getStorageSync('token')
				console.log('🔑 Token状态:', !!token)
				
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1500)
					return
				}
				
				// 检查用户是否为出租方且已实名认证
				const userInfo = uni.getStorageSync('user_info')
				const isOwner = userInfo?.userType === 'OWNER'
				const isVerified = userInfo?.profile?.idCardStatus === 'APPROVED'
				
				console.log('👤 用户信息:', {
					userType: userInfo?.userType,
					idCardStatus: userInfo?.profile?.idCardStatus,
					isOwner,
					isVerified
				})
				
				if (isOwner && isVerified) {
					// 权限检查通过，直接跳转到设备发布页面
					console.log('✅ 权限检查通过，跳转到设备上传页面')
					uni.navigateTo({
						url: '/pages/profile/device-upload'
					})
				} else {
					// 显示权限提示弹窗
					console.log('⚠️ 权限不足，显示提示弹窗')
					console.log('📱 当前showUploadModal状态:', this.showUploadModal)
					this.showUploadModal = true
					console.log('📱 设置后showUploadModal状态:', this.showUploadModal)
					
					// 备选方案：使用系统弹窗
					setTimeout(() => {
						if (!this.showUploadModal) {
							console.log('🚨 u-popup可能有问题，使用系统弹窗')
							uni.showModal({
								title: '权限提示',
								content: '上传设备需要出租方身份且完成实名认证',
								showCancel: true,
								confirmText: '前往设置',
								cancelText: '稍后再说',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/profile/index'
										})
									}
								}
							})
						}
					}, 100)
				}
			},
			
			goToDeviceList() {
				// 使用switchTab跳转到tabbar页面
				uni.switchTab({
					url: '/pages/devices/list'
				})
			},
			
			goToFavorites() {
				// 检查登录状态
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1500)
					return
				}
				
				uni.navigateTo({
					url: '/pages/profile/favorites'
				})
			},
			
			goToOrders() {
				// 使用switchTab跳转到tabbar页面
				uni.switchTab({
					url: '/pages/orders/list'
				})
			},
			
			goToProfile() {
				this.showUploadModal = false
				// 跳转到个人中心，用户可以在那里成为出租方或进行实名认证
				uni.switchTab({
					url: '/pages/profile/index'
				})
			},
			
			viewCaseDetail(caseItem) {
				// 可以跳转到案例详情页
				uni.showModal({
					title: caseItem.title,
					content: caseItem.description,
					showCancel: false
				})
			},
			
			// 缓存工具方法
			getCachedData(key, maxAge) {
				try {
					const cached = uni.getStorageSync(key)
					if (cached && cached.timestamp && cached.data) {
						const age = Date.now() - cached.timestamp
						if (age < maxAge) {
							return cached.data
						}
					}
				} catch (error) {
					console.warn('读取缓存失败:', error)
				}
				return null
			},
			
			setCachedData(key, data) {
				try {
					uni.setStorageSync(key, {
						data,
						timestamp: Date.now()
					})
				} catch (error) {
					console.warn('设置缓存失败:', error)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.home-page {
	min-height: 100vh;
	background: $bg-color;
}

.top-search {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: $bg-white;
	padding: $padding-base;
	box-shadow: $box-shadow-light;
	z-index: 100;
	
	.search-wrapper {
		display: flex;
		align-items: center;
	}
}

.scroll-content {
	padding: 100rpx $padding-base 0;
	height: 100vh;
}

.banner-section {
	margin-bottom: $margin-base;
}

.banner-swiper {
	height: 360rpx;
	border-radius: $border-radius-lg;
	margin-top: $padding-base;
	overflow: hidden;
	/* iOS微信小程序圆角兼容性修复 */
	-webkit-border-radius: $border-radius-lg;
	-moz-border-radius: $border-radius-lg;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.banner-item {
	position: relative;
}

.banner-content {
	width: 100%;
	height: 100%;
	position: relative;
}

.banner-image {
	width: 100%;
	height: 100%;
	border-radius: $border-radius-lg;
	/* iOS微信小程序圆角兼容性修复 */
	-webkit-border-radius: $border-radius-lg;
	-moz-border-radius: $border-radius-lg;
}

.banner-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	padding: $padding-xl $padding-base $padding-base;
	color: $text-white;
}

.banner-title {
	font-size: $font-size-xl;
	font-weight: $font-weight-bold;
	margin-bottom: 8rpx;
	display: block;
}

.banner-desc {
	font-size: $font-size-base;
	opacity: 0.9;
	display: block;
}

.section-title {
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	color: $text-primary;
	margin-bottom: $margin-base;
	display: block;
}

/* 公司介绍样式 */
.company-intro {
	.intro-content {
		padding-top: $padding-base;
	}
	
	.company-header {
		text-align: center;
		margin-bottom: $margin-lg;
		padding: $padding-base;
		background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), rgba(41, 121, 255, 0.05));
		border-radius: $border-radius-base;
	}
	
	.company-name {
		font-size: $font-size-lg;
		font-weight: $font-weight-bold;
		color: $text-primary;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.company-subtitle {
		font-size: $font-size-sm;
		color: $primary-color;
		display: block;
	}
	
	.intro-description {
		font-size: $font-size-base;
		color: $text-primary;
		line-height: 1.6;
		margin-bottom: $margin-lg;
		display: block;
		text-align: justify;
	}
	
	.core-advantages {
		display: grid;
		grid-template-columns: 1fr;
		gap: $margin-lg;
		margin-bottom: $margin-xl;
		padding: $padding-xl;
		background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(41, 121, 255, 0.05) 100%);
		border-radius: $border-radius-lg;
		border: 1rpx solid rgba(74, 144, 226, 0.1);
		box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.08);
	}
	
	.advantage-item {
		display: flex;
		align-items: center;
		gap: $margin-lg;
		padding: $padding-lg;
		background: rgba(255, 255, 255, 0.7);
		border-radius: $border-radius-md;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10rpx);
		transition: all $transition-base;
		position: relative;
		overflow: hidden;
		
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 12rpx 40rpx rgba(74, 144, 226, 0.15);
		}
	}
	
	.advantage-icon {
		width: 72rpx;
		height: 72rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
		border-radius: $border-radius-md;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			inset: -2rpx;
			background: linear-gradient(135deg, rgba(74, 144, 226, 0.3), rgba(92, 184, 92, 0.3), rgba(255, 107, 53, 0.3));
			border-radius: $border-radius-md;
			z-index: -1;
		}
	}
	
	.advantage-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.advantage-title {
		font-size: $font-size-lg;
		font-weight: $font-weight-bold;
		color: $text-primary;
		display: block;
		letter-spacing: 0.5rpx;
		background: linear-gradient(135deg, #2c3e50 0%, #4a90e2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	
	.advantage-desc {
		font-size: $font-size-base;
		color: $text-secondary;
		display: block;
		line-height: 1.5;
		font-weight: $font-weight-medium;
	}
	
	.intro-features {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: $margin-base;
		margin-bottom: $margin-lg;
	}
	
	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}
	
	.feature-icon {
		width: 60rpx;
		height: 60rpx;
		background: rgba(41, 121, 255, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.feature-text {
		font-size: $font-size-sm;
		color: $text-primary;
		font-weight: $font-weight-medium;
		text-align: center;
	}
	
	.company-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: $margin-base;
		padding: $padding-base;
		background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), rgba(92, 184, 92, 0.05));
		border-radius: $border-radius-base;
	}
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: $padding-sm;
	}
	
	.stat-number {
		font-size: $font-size-xl;
		font-weight: $font-weight-bold;
		color: $primary-color;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: $font-size-xs;
		color: $text-secondary;
		display: block;
	}
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $margin-base;
}

.more-btn {
	font-size: $font-size-sm;
	color: $text-secondary;
	display: flex;
	align-items: center;
}

.quick-nav {
	margin-bottom: $margin-base;
}

.nav-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: $margin-base;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $padding-base;
	background: $bg-white;
	border-radius: $border-radius-base;
	box-shadow: $box-shadow-light;
	transition: transform 0.2s;
	
	&:active {
		transform: scale(0.98);
	}
}

.nav-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: rgba(74, 144, 226, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $margin-sm;
}

.nav-text {
	font-size: $font-size-sm;
	color: $text-secondary;
}

.recommend-section, .cases-section, .stats-section {
	margin-bottom: $margin-base;
}

.device-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: $margin-base;
}

.device-item {
	background: $bg-white;
	border-radius: $border-radius-base;
	overflow: hidden;
	box-shadow: $box-shadow-light;
	transition: transform 0.2s;
	
	&:active {
		transform: scale(0.98);
	}
}

.device-image {
	width: 100%;
	height: 240rpx;
}

.device-info {
	padding: $padding-base;
}

.device-title {
	font-size: $font-size-base;
	font-weight: $font-weight-medium;
	color: $text-primary;
	margin-bottom: 8rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.device-price {
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	color: $primary-color;
	margin-bottom: 8rpx;
	display: block;
}

.device-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.device-location {
	font-size: $font-size-sm;
	color: $text-secondary;
}

.device-status {
	font-size: $font-size-xs;
	padding: 4rpx 12rpx;
	border-radius: $border-radius-sm;
	
	&.status-available {
		background: rgba(92, 184, 92, 0.1);
		color: #5CB85C;
	}
	
	&.status-rented {
		background: rgba(217, 83, 79, 0.1);
		color: #D9534F;
	}
	
	&.status-maintenance {
		background: rgba(240, 173, 78, 0.1);
		color: #F0AD4E;
	}
}

.loading-placeholder {
	text-align: center;
	padding: $padding-xxl;
	color: $text-secondary;
}

.loading-text {
	font-size: $font-size-sm;
	margin-top: $margin-base;
	display: block;
}

.empty-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: $padding-xl;
	color: $text-secondary;
}

.empty-text {
	margin: $margin-base 0;
	font-size: $font-size-sm;
	color: $text-secondary;
}

.cases-scroll {
	white-space: nowrap;
}

.cases-list {
	display: inline-flex;
	gap: $margin-base;
	padding: 0 $margin-base;
}

.case-item {
	width: 480rpx;
	background: $bg-white;
	border-radius: $border-radius-base;
	overflow: hidden;
	box-shadow: $box-shadow-light;
	flex-shrink: 0;
}

.case-image {
	width: 100%;
	height: 240rpx;
}

.case-content {
	padding: $padding-base;
}

.case-title {
	font-size: $font-size-base;
	font-weight: $font-weight-medium;
	color: $text-primary;
	margin-bottom: 8rpx;
	display: block;
}

.case-company {
	font-size: $font-size-sm;
	color: $primary-color;
	margin-bottom: 8rpx;
	display: block;
}

.case-desc {
	font-size: $font-size-sm;
	color: $text-secondary;
	line-height: 1.4;
	display: block;
}



.upload-modal {
	padding: $padding-xl;
	background: $bg-white;
	border-radius: 20rpx;
	margin: 40rpx;
	max-width: 600rpx;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $margin-lg;
}

.modal-title {
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	color: $text-primary;
}

.modal-desc {
	font-size: $font-size-base;
	color: $text-secondary;
	text-align: center;
	margin-bottom: $margin-xl;
	display: block;
}

.permission-tips {
	display: flex;
	flex-direction: column;
	gap: $margin-sm;
	margin: $margin-lg 0;
	padding: $padding-base;
	background: rgba(82, 196, 26, 0.05);
	border-radius: $border-radius-base;
	border: 1rpx solid rgba(82, 196, 26, 0.1);
}

.tip-item {
	display: flex;
	align-items: center;
	gap: $margin-sm;
	font-size: $font-size-sm;
	color: $text-primary;
}

.upload-actions {
	display: flex;
	flex-direction: column;
	gap: $margin-base;
}

.bottom-spacing {
	height: calc(env(safe-area-inset-bottom) + 40rpx);
}
</style>
